<template>
  <base-dialog title="统计数据"   v-bind="$attrs"
               v-on="$listeners" :disabled="true">
        <top-radio-group :list="countList" @handleChange="getDocumentDistInfo"></top-radio-group>
        <el-table
                :data="info.value"
                class="full-width"
                row-key="id"
                v-loading="loading"
        >
            <el-table-column align="left" type="index" label="序号" min-width="60">
                <template slot-scope="scope">
                    {{(queryParams.page-1)*queryParams.per_page+scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column align="left" prop="name" label="名字">
            </el-table-column>
            <el-table-column align="left" prop="name" label="状态">
                <template slot-scope="{row}">
                    <span v-if="row.unread" class="redSpan">未读</span>
                    <span v-else>已读</span>
                </template>
            </el-table-column>
          <my-time-column align="left" prop="gmt_modified" label="时间"></my-time-column>
        </el-table>
        <pagination
                v-show="info.total > 0"
                :total="info.total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.per_page"
                @pagination="getList"
        />
  </base-dialog>
</template>

<script>
    import msg from "@/api/userSettings/msg/index";
    import TopRadioGroup from "@/components/Common/topRadioGroup";
    import BaseDialog from '@/components/Common/BaseDialog'
    import MyTimeColumn from '../../../components/TableColumn/MyTimeColumn'
    export default {
        name: "CountDetailDialog",
        components: { MyTimeColumn, BaseDialog, TopRadioGroup},
        data() {
            return {
                dialogVisible: false,
                info: {value:[],total:0,read:0,unread:0},
                queryParams:{
                    page:1,
                    per_page:10,
                    mssages:undefined,
                    unread:undefined
                },
                loading:false,
                countList:[{label:undefined,name:"总数",num:0},{label:0,name:"已读",num:0},{label:1,name:"未读",num:0}]
            };
        },
        props:["id"],
        created() {
            this.queryParams.mssages=this.id
            this.getDocumentDistInfo()
        },
        methods: {
            unreadFormatter(row){
                return row.unread?"未读":"已读"
            },
            handleClose(done) {
                this.$emit("update:visible", false)
            },
            //获取未读通知及列表
            getDocumentDistInfo(value) {
                this.loading = true
                this.queryParams.unread=value
                this.queryParams.page=1
                this.getList()
            },
            getList(){
                msg.getUnread_count2(this.queryParams).then(res=>{
                    this.info = res.data;
                    if(this.queryParams.unread == undefined){
                        this.countList[0].num = this.info.total
                        this.countList[1].num = this.info.read
                        this.countList[2].num = this.info.unread
                    }
                    this.loading = false
                }).catch(res=>{
                    this.loading = false
                })
            }
        }
    };
</script>
